<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue';

const model = defineModel<string[]>()
const deleteRow = (index: number) => {
    model.value?.splice(index, 1)
}
const appendRow = () => {
    if(!model.value){
        model.value = []
    }
    model.value.push("")
}
</script>

<template>
    <ElTable :data="model" :show-header="false" >
        <ElTableColumn>
            <template #default="rowScope: { row: string }">
                <ElInput v-model="rowScope.row"></ElInput>
            </template>
        </ElTableColumn>
        <ElTableColumn width="100">
            <template #default="rowScope: { $index: number }">
                <ElButton type="danger" :icon="Delete" @click="deleteRow(rowScope.$index)"></ElButton>
            </template>
        </ElTableColumn>
        <template #append>
            <ElButton style="width: 100%;" size="small" :icon="Plus" @click="appendRow">新增</ElButton>
        </template>
    </ElTable>
</template>